<template>
  <div style="margin-top: 10px">
    <div
      class="van-coupon van-cell art special-div"
      role="button"
      tabindex="0"
      style="width: auto"
    >
      <div
        class="
          van-cell__value van-cell__value--alone
          van-contact-card__value
          definContent
          special-content
        "
      >
        <div class="special-title">
          <img class="home-icon2" :src="icon" />开始测评
        </div>
        <div>
          <div class="ell_1 special">测评项目：{{ item.projectName }}</div>
          <div class="special personal">适用人群：{{ item.gradName }}</div>
          <div class="ell_1 special">测评简介：{{ item.remark }}</div>
        </div>

        <div class="special-button">
          <button>开始测评</button>
        </div>
      </div>
      <div class="van-image" style="width: 130px">
        <img
          :src="item.classesName"
          class="van-image__img"
          style="object-fit: cover"
        />
      </div>
      <div class="special-title2">
        <img class="home-icon2" :src="icon2" />请在{{ item.requestDate[0] }}年{{
          item.requestDate[1]
        }}月{{ item.requestDate[2] }}日前完成
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import homeicon2 from '/@/assets/icon/home-icon2.png'
import homeicon3 from '/@/assets/icon/home-icon3.png'

interface Props {
  item: {
    projectName: string
    gradName: string
    remark: string
    classesName: string
    requestDate: any[]
  }
}

const props = defineProps<Props>()

const icon = homeicon2

const icon2 = homeicon3
</script>

<style lang="less" scoped>
@import '../style/card.less';

.special-div {
  background: url('../../../assets/icon/home-bg.png');
  background-size: 100% 100%;
  min-height: 180px;
  position: relative;
  padding-bottom: 20px;
}
.van-cell {
  align-items: center;
}

.personal {
  text-align: justify !important;
  text-justify: newspaper !important;
  word-break: break-all !important;
  overflow: visible !important;
}

.special-content {
  min-height: 130px !important;
  position: relative;
}

.home-icon2 {
  width: 20px;
  margin-right: 5px;
}

.special-button {
  text-align: right;

  button {
    width: 90px;
    height: 23px;
    background-color: rgb(97, 187, 131);
    border-radius: 15px;
    border: none;
    color: white;
    font-size: 12px;
    line-height: 23px;
  }
}

.special {
  font-size: 12px;
  color: #646566;
}

.special-title {
  color: orange;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.special-title2 {
  color: orange;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: absolute;
  left: 20px;
  bottom: 10px;
  white-space: nowrap;
}
</style>
